I tried running gulp command on my terminal in the project directory where I have the gulpfile.js but I get the error, The following tasks did not complete: default, gulpSass; Did you forget to signal async completion which I tried looking for a solution to but to no avail.
I checked out some possible reasons to why I am facing the problem and implemented some but I still kept getting the error.
One of the possible fix I tried was using async await in all of the functions but it didn't solve the issue.
This is my gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
notify = require('gulp-notify'),
livereload = require('gulp-livereload')
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
// Concat all js into one script
async function js ( cb ) {
return await gulp.src(['./assets/js/lib/*.js','./assets/js/scripts/**/*.js'])
.pipe(plumber(plumberErrorHandler))
//.pipe(jshint())
//.pipe(jshint.reporter('jshint-stylish'))
.pipe(sourcemaps.init())
.pipe(concat('scripts.min.js'))
.pipe(uglify())
.pipe(sourcemaps.write('../maps/'))
.pipe(gulp.dest('./assets/js'))
.pipe(livereload());
cb();
}
// Sass compiler + Maps
async function sass ( cb ) {
return await gulp.src('./assets/scss/*.scss')
.pipe(plumber(plumberErrorHandler))
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'development'}))
//.pipe(autoprefixer({
// browsers: ['>1%'],
//remove: false
//}))
.pipe(sourcemaps.write('./assets/maps'))
.pipe(gulp.dest('.'))
.pipe(livereload());
cb();
}
// Watch for changes
async function watch ( cb ) {
livereload.listen();
return await gulp.watch('./assets/scss/**/*', ['sass']);
return await gulp.watch('./assets/js/lib/**/*.js', ['js']);
return await gulp.watch('./assets/js/scripts/**/*.js', ['js']);
return await gulp.watch('./**/*.php').on('change', async function(file) {
livereload.changed(file.path);
});
cb();
}
// Error handling/reporting
var plumberErrorHandler = {
errorHandler: notify.onError({
title: 'Gulp',
message: 'Error: <%= error.message %>'
})
}
// Default
exports.default = gulp.series(js, sass, watch);
First, your error message says The following tasks did not complete: default, gulpSass; but there is no gulpSass task in your code so you changed something before you copied it here.
Second, this syntax is old:
return await gulp.watch('./assets/scss/**/*', ['sass']);
Use this instead:
gulp.watch('./assets/scss/**/*', sass);
You are using the function name form of tasks not the gulp.task('sass') syntax, so in the watch calls you use the function name sass but not as a string'sass'.
Make this change throughout your watch task.
And I would get rid of the return await - it is probably a problem.